<template>
  <el-dialog
    :visible.sync="visible"
    width="1200px"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    :class="{
      'drill-dialog': true,
      'drill-dialog-dark': isDarkTheme,
      'drill-dialog-light': !isDarkTheme
    }"
  >
    <div class="header-box">
      <div class="header-left">
        <img src="../css/dialogIcon-dark.png" alt="">
        <span>机器人处理单量及通过率</span> 
      </div>
      <div class="header-right">
        <img src="../css/dialogClose-dark.png" @click="handleClose" alt="">
      </div>
    </div>
    <queryFomeVue
      ref="queryFomeVue"
      :fieldList="fieldList"
     />

    <barChart
      ref="barChart"
      :id="id"
      :isDarkTheme="isDarkTheme"
      :barChartData="barChartData"
    />
    <!-- <div class="title-box">
      <CustomTitle
        :pageConfig="pageConfig"
        :title="title2"
      />
    </div>
    <CustomTable
      ref="detailTable"
      :columns="columns"
      :tableData="tableData"
    /> -->
 </el-dialog>
</template>

<script>
import CustomTitle from '../components/CustomTitle.vue';
import queryFomeVue from '../DetailComponents/queryForm.vue';
import barChart from '../DetailComponents/barChart.vue';
import detailPage from '../DetailComponents/DetailTable.vue';
import CustomTable from '../DetailComponents/CustomTable.vue';


export default {
  components: {
    queryFomeVue,
    barChart,
    detailPage,
    CustomTable,
    CustomTitle

  },
  props: {
    pageConfig: Object
  },
  data() {
    return {
      visible: false,
      title1: "省份分布",
      title2: "明细信息",
      id: 'barChart4',
      fieldList: ['type', 'economic', 'daterange'],
      barChartData: {
        legendData: ['处理单量', '通过率', '', '', '总体通过率'],
        xData: ['江苏', '四川', 'xxx', 'xxxx', 'xxxxx', 'xxxxx', 'xxx'],
        yData1: [150, 230, 224, 218, 135, 147, 260],
        yData2: [150, 230, 224, 218, 135, 147, 260],
        yData5: [70, 78, 82, 82, 12, 32, 59],
      },
      tableData: [],
      columns: [
        {
          prop: 'name',
          label: '省份',
          minWidth: 100
        },
        {
          prop: 'age',
          label: '经济事项',
          minWidth: 160
        },
        {
          prop: 'sex',
          label: '类型',
          minWidth: 120
        },
        {
          prop: 'address',
          label: '运行账号',
          minWidth: 160
        },
        {
          prop: 'address',
          label: '姓名',
          minWidth: 120
        },
        {
          prop: 'address',
          label: '报账单号',
          minWidth: 180
        },
        {
          prop: 'address',
          label: '到岗时间',
          minWidth: 180
        },
        {
          prop: 'address',
          label: '时长',
          minWidth: 180
        },
        {
          prop: 'address',
          label: '是否涉及付款',
          minWidth: 180
        },
      ]

    }
  },
  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  methods: {
    handleClose(done) {
      this.visible = false;
      // done();
    },
    handleOpen() {
      this.visible = true
    }
  }
}
</script>


<style lang="scss" scoped>
@import '../../../styles/newBase.scss';

</style>